import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
import { userEvent } from '@storybook/testing-library';
import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { styleMap } from 'lit/directives/style-map.js';

<Meta
  title="Components/Dropdown Button/Dropdown"
  component="bl-dropdown"
  argTypes={{
    label: {
      control: {
        type: 'text'
      }
    },
    variant: {
      options: ['primary', 'secondary', 'tertiary'],
      default: 'primary',
      control: { type: 'select' }
    },
    kind: {
      options: ['default', 'neutral', 'success', 'danger'],
      default: 'default',
      control: { type: 'select' }
    },
    disabled: {
      control: 'boolean'
    },
    size: {
      options: ['large', 'medium', 'small'],
      control: { type: 'select' }
    }
  }}
/>

export const dropdownOpener = async ({ canvasElement }) => {
  const dropdown = canvasElement?.querySelector('bl-dropdown')
  if (dropdown.shadowRoot) {
    const button = dropdown.shadowRoot.querySelector("bl-button")?.shadowRoot?.querySelector("button");
    await userEvent.click(button);
  }
}

export const SingleDropdownButtonTemplate = (args) => html`<bl-dropdown
    variant=${ifDefined(args.variant)}
    kind=${ifDefined(args.kind)}
    size=${ifDefined(args.size)}
    label="${ifDefined(args.label)}"
    ?disabled=${args.disabled}
    style=${ifDefined(args.styles ? styleMap(args.styles) : undefined)}
      ><bl-dropdown-group caption="Caption">
        <bl-dropdown-item>${args.content || 'Action 1'}</bl-dropdown-item>
        <bl-dropdown-item>Action 2</bl-dropdown-item>
      </bl-dropdown-group>
      <bl-dropdown-item>Action 3</bl-dropdown-item>
      <bl-dropdown-item icon="info">Action 4</bl-dropdown-item>
      <bl-dropdown-item>Action 5</bl-dropdown-item>
      <bl-dropdown-group caption="Caption">
        <bl-dropdown-item icon="heart">Action 6</bl-dropdown-item>
        <bl-dropdown-item>Action 7</bl-dropdown-item>
      </bl-dropdown-group>
      </bl-dropdown>`

export const IconDropdownTemplate = (args) => html`<bl-dropdown
    variant=${ifDefined(args.variant)}
    kind=${ifDefined(args.kind)}
    size=${ifDefined(args.size)}
    label="${ifDefined(args.label)}"
    icon="${ifDefined(args.icon)}"
    ?disabled=${args.disabled}
    style=${ifDefined(args.styles ? styleMap(args.styles) : undefined)}
      ><bl-dropdown-group caption="Caption">
        <bl-dropdown-item>${args.content || 'Action 1'}</bl-dropdown-item>
        <bl-dropdown-item>Action 2</bl-dropdown-item>
      </bl-dropdown-group>
      <bl-dropdown-item>Action 3</bl-dropdown-item>
      <bl-dropdown-item icon="info">Action 4</bl-dropdown-item>
      <bl-dropdown-item>Action 5</bl-dropdown-item>
      </bl-dropdown>`

export const DisabledItemDropdownTemplate = (args) => html`<bl-dropdown
    variant=${ifDefined(args.variant)}
    kind=${ifDefined(args.kind)}
    size=${ifDefined(args.size)}
    label="${ifDefined(args.label)}"
    ?disabled=${args.disabled}
    style=${ifDefined(args.styles ? styleMap(args.styles) : undefined)}
      ><bl-dropdown-group caption="Caption">
        <bl-dropdown-item disabled>${args.content || 'Action 1'}</bl-dropdown-item>
        <bl-dropdown-item>Action 2</bl-dropdown-item>
      </bl-dropdown-group>
      <bl-dropdown-item>Action 3</bl-dropdown-item>
      <bl-dropdown-item icon="info" disabled>Action 4</bl-dropdown-item>
      <bl-dropdown-item>Action 5</bl-dropdown-item>
      </bl-dropdown>`

export const Template = (args) => html`
${SingleDropdownButtonTemplate({...args})}
${SingleDropdownButtonTemplate({variant: 'secondary', ...args})}
${SingleDropdownButtonTemplate({variant: 'tertiary', ...args})}`

export const ButtonTypes = (args) => html`
${SingleDropdownButtonTemplate({...args})}
${SingleDropdownButtonTemplate({kind: 'neutral', ...args})}
${SingleDropdownButtonTemplate({kind: 'success', ...args})}
${SingleDropdownButtonTemplate({kind: 'danger', ...args})}`

export const SizesTemplate = (args) => html`
${SingleDropdownButtonTemplate({size: 'large', ...args})}
${SingleDropdownButtonTemplate({size: 'medium', ...args})}
${SingleDropdownButtonTemplate({size: 'small', ...args})}`

# Dropdown Button

<bl-badge icon="document">ADR</bl-badge>
<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=2158%3A8508)</bl-badge>
<bl-badge icon="check_fill">RTL Supported</bl-badge>

Dropdown Button is used to display a list of actions.

<bl-alert variant="warning" icon>Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>

## Dropdown Button Variants

Dropdown Button has the same variants ([Primary](/docs/components-button--primary-buttons), [Secondary](/docs/components-button--secondary-buttons) and [Tertiary](/docs/components-button--tertiary-buttons)) with the [Button](/docs/components-button--variants).
Every variant represents the importance of the actions inside it.

<Canvas>
  <Story name="Variants" args={{ label: 'Dropdown Button' }} play={dropdownOpener}>
    {Template.bind({})}
  </Story>
</Canvas>

## Dropdown Button Kinds

Dropdown Button has the same kinds as the button has.
Every kind indicates a state of the dropdown buttons. It can has 4 different "kind"s. `default`, `neutral`, `success` and `danger`.

<Canvas>
  <Story name="Kinds" args={{ label: 'Dropdown Button' }} play={dropdownOpener}>
    {ButtonTypes.bind({})}
  </Story>
</Canvas>

## Dropdown Button Sizes

We have 3 sizes of dropdown buttons: **Large**, **Medium**, **Small**. Default size is **Medium**.

<Canvas>
  <Story name="Dropdown Button Sizes" args={{ label: 'Dropdown Button' }} play={dropdownOpener}>
    {SizesTemplate.bind({})}
  </Story>
</Canvas>

If dropdown button has an action with a long text that can not fit in a single line, popover will be automatically widen to the right side of the dropdown button.

<Canvas>
  <Story name="Automatic Left Align" args={{ label: 'Dropdown Button', content: 'Action with very long text' }} play={dropdownOpener}>
    {SingleDropdownButtonTemplate.bind({})}
  </Story>
</Canvas>

## Dropdown Button Icons

You can add icons to your dropdown buttons using the `icon` attribute. The icon will be displayed on the left side of the button label.

<Canvas>
  <Story name="With Icons" args={{ label: 'Dropdown Button' }} play={dropdownOpener}>
    {html`
      ${IconDropdownTemplate({label: 'Settings', icon: 'settings', variant: 'primary'})}
      ${IconDropdownTemplate({label: 'Settings', icon: 'settings', variant: 'secondary'})}
      ${IconDropdownTemplate({label: 'Add Item', icon: 'plus_fill', variant: 'tertiary'})}
    `}
  </Story>
</Canvas>

## Disabling Dropdown Buttons

We have 2 types of disabled dropdown buttons: Disable version of Primary and Secondary buttons is the same.

<Canvas columns={1}>
  <Story name="Disabling Dropdown Buttons" args={{ label: 'Dropdown Button', disabled: true }}>
    {SizesTemplate.bind({})}
  </Story>
</Canvas>

Whereas Tertiary buttons keep their transparent backgrounds.

<Canvas columns={1}>
  <Story name="Disabling Tertiary Dropdown Buttons" args={{ label: 'Dropdown Button', disabled: true, variant:"tertiary" }}>
    {SizesTemplate.bind({})}
  </Story>
</Canvas>

## Disabling Dropdown Items

You can disable dropdown items by setting the `disabled` attribute on the `bl-dropdown-item` element.

<Canvas>
  <Story name="Disabling Dropdown Items" args={{ label: 'Dropdown Button' }} play={dropdownOpener}>
    {DisabledItemDropdownTemplate.bind({})}
  </Story>
</Canvas>

## RTL Support

The dropdown component supports RTL (Right-to-Left) text direction. You can enable RTL mode by setting the `dir` attribute on a parent element or the `html` tag. When in RTL mode, the dropdown menu will align from the right side.

<Canvas>
  <Story name="RTL Support">
    {() => html`
      <div style="display: flex; gap: 32px;">
        <div>
          <p style="margin-bottom: 8px;">LTR (Left-to-Right)</p>
          <bl-dropdown label="Settings">
            <bl-dropdown-group caption="Account">
              <bl-dropdown-item icon="account">Profile</bl-dropdown-item>
              <bl-dropdown-item icon="settings">Preferences</bl-dropdown-item>
            </bl-dropdown-group>
            <bl-dropdown-item>Logout</bl-dropdown-item>
          </bl-dropdown>
        </div>
        <div dir="rtl">
          <p style="margin-bottom: 8px;">RTL (Right-to-Left)</p>
          <bl-dropdown label="الإعدادات">
            <bl-dropdown-group caption="الحساب">
              <bl-dropdown-item icon="account">الملف الشخصي</bl-dropdown-item>
              <bl-dropdown-item icon="settings">التفضيلات</bl-dropdown-item>
            </bl-dropdown-group>
            <bl-dropdown-item>تسجيل الخروج</bl-dropdown-item>
          </bl-dropdown>
        </div>
      </div>
    `}
  </Story>
</Canvas>

Here's a vanilla JavaScript and HTML example of how to use RTL support:

```html
<!-- index.html -->
<html>
<head>
  <meta charset="UTF-8">
  <title>Baklava Dropdown RTL Example</title>
  <!-- Import Baklava's CSS and JavaScript -->
  <script type="module" src="path/to/baklava.js"></script>
  <style>
    .container {
      margin: 20px;
    }
    .dropdown-container {
      display: flex;
      gap: 32px;
      margin-top: 20px;
    }
    .dropdown-group {
      flex: 1;
    }
  </style>
</head>
<body>
  <div class="container">
    <button onclick="toggleDirection()">Toggle RTL/LTR</button>

    <div class="dropdown-container">
      <!-- LTR Example -->
      <div class="dropdown-group">
        <h3>LTR Dropdown</h3>
        <bl-dropdown label="Settings">
          <bl-dropdown-group caption="Account">
            <bl-dropdown-item icon="account">Profile</bl-dropdown-item>
            <bl-dropdown-item icon="settings">Preferences</bl-dropdown-item>
          </bl-dropdown-group>
          <bl-dropdown-item>Logout</bl-dropdown-item>
        </bl-dropdown>
      </div>

      <!-- RTL Example -->
      <div class="dropdown-group" dir="rtl">
        <h3>RTL Dropdown</h3>
        <bl-dropdown label="الإعدادات">
          <bl-dropdown-group caption="الحساب">
            <bl-dropdown-item icon="account">الملف الشخصي</bl-dropdown-item>
            <bl-dropdown-item icon="settings">التفضيلات</bl-dropdown-item>
          </bl-dropdown-group>
          <bl-dropdown-item>تسجيل الخروج</bl-dropdown-item>
        </bl-dropdown>
      </div>
    </div>
  </div>

  <script>
    // Example of dynamically changing direction
    const toggleDirection = () => {
      const rtlContainer = document.querySelector('[dir="rtl"]');
      rtlContainer.dir = rtlContainer.dir === 'rtl' ? 'ltr' : 'rtl';
    };

    // Example of creating a dropdown programmatically
    const createDropdown = (isRTL) => {
      const container = document.createElement('div');
      if (isRTL) container.dir = 'rtl';

      const dropdown = document.createElement('bl-dropdown');
      dropdown.label = isRTL ? 'الإعدادات' : 'Settings';

      const group = document.createElement('bl-dropdown-group');
      group.caption = isRTL ? 'الحساب' : 'Account';

      const items = isRTL ? [
        { icon: 'account', text: 'الملف الشخصي' },
        { icon: 'settings', text: 'التفضيلات' },
        { icon: 'logout', text: 'تسجيل الخروج' }
      ] : [
        { icon: 'account', text: 'Profile' },
        { icon: 'settings', text: 'Preferences' },
        { icon: 'logout', text: 'Logout' }
      ];

      items.forEach(item => {
        const dropdownItem = document.createElement('bl-dropdown-item');
        dropdownItem.icon = item.icon;
        dropdownItem.textContent = item.text;
        if (item.icon === 'logout') {
          dropdown.appendChild(dropdownItem);
        } else {
          group.appendChild(dropdownItem);
        }
      });

      dropdown.appendChild(group);
      container.appendChild(dropdown);
      document.body.appendChild(container);
    };
  </script>
</body>
</html>
```

## Reference

<ArgsTable of="bl-dropdown" />
